import { Box } from '@mantine/core';
import { IconProps } from './types';

export function ReactRouterIcon({ size = 40, ...others }: IconProps) {
  return (
    <Box
      component="svg"
      __vars={{ '--icon-size': `${size}px` }}
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMid"
      viewBox="0 0 256 140"
      data-logo="react-router"
      {...others}
    >
      <path d="M78.066 92.588c12.818 0 23.209-10.391 23.209-23.21 0-12.817-10.391-23.208-23.21-23.208-12.817 0-23.208 10.39-23.208 23.209 0 12.818 10.391 23.209 23.209 23.209zm-54.857 46.417c12.818 0 23.209-10.39 23.209-23.209 0-12.817-10.391-23.208-23.21-23.208C10.392 92.588 0 102.978 0 115.796c0 12.818 10.39 23.21 23.209 23.21zm209.582 0c12.818 0 23.209-10.39 23.209-23.209 0-12.817-10.39-23.208-23.209-23.208-12.818 0-23.209 10.39-23.209 23.208 0 12.818 10.391 23.21 23.21 23.21z" />
      <path
        fill="#D0021B"
        d="M156.565 70.357c-.742-7.754-1.12-14.208-7.06-18.744-7.522-5.744-16.044-2.017-26.54-5.806C112.65 43.312 105 34.155 105 23.24 105 10.405 115.578 0 128.626 0c9.665 0 17.974 5.707 21.634 13.883 5.601 10.64 1.96 21.467 8.998 26.921 8.333 6.458 19.568 1.729 32.104 7.848a23.614 23.614 0 019.84 8.425A22.858 22.858 0 01205 69.718c0 10.915-7.65 20.073-17.964 22.568-10.497 3.789-19.019.062-26.541 5.806-8.46 6.46-3.931 17.267-10.826 28.682-3.913 7.518-11.867 12.663-21.043 12.663-13.048 0-23.626-10.405-23.626-23.24 0-9.323 5.582-17.364 13.638-21.066 12.536-6.12 23.77-1.39 32.104-7.848 4.807-3.726 5.823-9.473 5.823-16.926z"
      />
    </Box>
  );
}
